<template>
  <div>
    <div class="bg-white">
      <div class="container">
        <div
          class="row justify-content-center align-items-center d-flex vh-100"
        >
          <div class="col-md-4 mx-auto">
            <div class="osahan-login py-4">
              <div class="text-center mb-4">
                <a
                ><img src="@/assets/img/logorl.png" alt="" width="300"
                /></a>
                <p class="text-muted mt-2">
                  我们为什么如此热爱未来，因为我们将生活在那里。
                </p>
              </div>
              <form action="index.html" >
                <div class="form-group">
                  <label class="mb-1">账号:</label>
                  <div class="position-relative icon-form-control">
                    <i class="el-icon-user position-absolute"></i>
                    <input
                      v-model="usernam"
                      autocomplete="off"
                      type="email"
                      class="form-control"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="mb-1">密码:</label>
                  <div class="position-relative icon-form-control">
                    <i class="el-icon-lock position-absolute"></i>
                    <input
                      v-model="password"
                      autocomplete="off"
                      type="password"
                      class="form-control"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label class="mb-1">验证码</label>
                  <div class="position-relative icon-form-control" >
                    <i class="el-icon-wallet position-absolute"></i>
                    <div style="display:flex">
                      <input
                        autocomplete="off"
                        class="form-control "
                        style="width:70%"
                        v-model="code"
                        placeholder="请输入验证码，区分大小写"
                      />
                      <div><verificationCode ref="code"></verificationCode></div>
                    </div>

                  </div>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                  <input
                    autocomplete="off"
                    type="checkbox"
                    class="custom-control-input"
                    id="customCheck1"
                  />
                  <label class="custom-control-label" for="customCheck1"
                  >记住密码</label
                  >
                </div>
                <button
                  class="btn btn-primary btn-block text-uppercase"
                  type="button"
                  @click="login"
                >
                  登录
                </button>
                <!-- <div class="text-center mt-3 border-bottom pb-3">
                  <p class="small text-muted">Or login with</p>
                  <div class="row">
                    <div class="col-4">
                      <button
                        type="button"
                        class="btn btn-sm btn-outline-instagram btn-block"
                      >
                        <i class="feather-instagram"></i> Instagram
                      </button>
                    </div>
                    <div class="col-4">
                      <button
                        type="button"
                        class="btn btn-sm btn-outline-linkedin btn-block"
                      >
                        <i class="feather-linkedin"></i> Linkedin
                      </button>
                    </div>
                    <div class="col-4">
                      <button
                        type="button"
                        class="btn btn-sm btn-outline-facebook btn-block"
                      >
                        <i class="feather-facebook"></i> Facebook
                      </button>
                    </div>
                  </div>
                </div> -->
                <div class="py-3 d-flex align-item-center">
                  <a href="">忘记密码?</a>
                  <span class="ml-auto" @click="register">
                    注册
                    <a class="font-weight-bold" href="#"
                    >Join now</a
                    ></span
                  >
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import verificationCode from '@/components/common/verificationCode.vue';

export default {
  name: 'login',
  data() {
    return {
      usernam: "",
      password: "",
      code: "",
      loginStore: this.newStore(),
    };
  },
  components: { verificationCode },
  methods: {
    submitfalse() {
      return false;
    },
    register() {
      this.$router.push('/register');
    },
    login() {
      if (this.$refs.code.identifyCode !== this.code) {
        this.$message.error('验证码错误');
        this.code = '';
        this.$refs.code.createdCode();
      } else if (this.usernam === "" || this.password === "") {
        this.$message({
          message: "账号密码不能为空！",
          type: "error",
        });
      } else if (this.usernam && this.password !== "") {
        this.spost(this.loginStore, "/login", {
          username: this.usernam,
          password: this.password,
        }).then((res) => {
          localStorage.setItem("token", res.d.token);
          localStorage.setItem("userinfo", JSON.stringify(res.d.userinfo));
          this.$store.commit("setUserinfo", res.d.userinfo);
          if (res.d.userinfo.jurisdiction === '3') {
            this.$confirm('检测到您是管理员，请选择要进入的页面', '页面选择', {
              distinguishCancelAndClose: true,
              confirmButtonText: '后台管理',
              cancelButtonText: 'Baker主页',
              lockScroll: false,
              showClose: false,
            })
              .then(() => {
                this.$router.push("/admin");
              })
              .catch(() => {
                this.$router.push("/");
              });
          } else {
            this.$router.push("/");
          }
        });
      }
    },
  },
};
</script>

<style>
</style>
